<template>
	<view class="content">
		<view class="publish-box" style="padding-bottom: 20px;">
			<view>宠物靓照</view>
			<image src="../../static/image/猫爪.png"
				style="position: absolute; width: 20px; height: 20px; top: 9px; right: 5%;transform: rotate(30deg);">
			</image>
			<view class="image-picker">
				<uni-file-picker limit="6" title="最多选择6张图片" file-extname="png,jpg" @select="selectSuccess"
					@delete="removeImage"></uni-file-picker>
				<view
					style="position: absolute; width: 60%; font-size: 10px;bottom: 15px; right: 20px;color: #cdcdcd; ">
					请发布真实的图片，严禁发布广告、血腥、暴力等不良信息，虚假信息将封号！
				</view>
			</view>
		</view>


		<view class="publish-box" style="height: 90px;">
			<view>标签类型</view>
			<uni-data-select v-model="tagId" :localdata="range" @change="change"
				style="width: 95%;margin-top: 10px;"></uni-data-select>
		</view>

		<view class="publish-box" style="height: 90px;">
			<view>简述一下你宠物的信息吧~</view>
			<uni-easyinput maxlength="50" prefixIcon="bars" v-model="sketch" :inputBorder="false" placeholder="请输入内容"
				style="width: 95%; margin-top: 15px;"></uni-easyinput>
		</view>

		<view class="publish-box" style="height: 150px;">
			<view>详细描述一下你的宠物哦~</view>
			<uni-easyinput maxlength="300" prefixIcon="bars" type="textarea" v-model="content" :inputBorder="false"
				placeholder="请输入内容" style="width: 95%; margin-top: 15px;"></uni-easyinput>
		</view>


		<view class="publish-button" @click="publish">发布</view>
	</view>
</template>

<script>
	import {
		publishTrend
	} from "@/api/trend.js"
	export default {
		data() {
			return {
				sketch: "我有一只可爱的小狗",
				content: "",
				tagId: 1,
				range: [{
						value: 1,
						text: "领养"
					},
					{
						value: 2,
						text: "配种"
					}
				],
				uploadFilePaths: [],
				// 上传完成后端返回的图片路径
				imagePaths: []
			};
		},
		methods: {
			change(e) {
				console.log("e:", e);
			},
			// 选择图片触发
			selectSuccess(e) {
				let selectTempFilePaths = e.tempFilePaths;
				let filePaths = this.uploadFilePaths.concat(selectTempFilePaths);
				this.uploadFilePaths = filePaths;
			},
			// 移除图片触发
			removeImage(e) {
				let removeTempFilePath = e.tempFilePath;
				let filePaths = this.uploadFilePaths.filter(function(item) {
					return item != removeTempFilePath;
				})
				this.uploadFilePaths = filePaths;
			},
			publish() {
				let promises = [];
				for (let i = 0; i < this.uploadFilePaths.length; i++) {
					promises.push(new Promise((resolve, reject) => {
						uni.uploadFile({
							url: 'http://localhost:7777/uploadImage',
							filePath: this.uploadFilePaths[i],
							name: 'image',
							success: (uploadFileRes) => {
								const image = eval("(" + uploadFileRes.data + ")").data;
								this.imagePaths.push(image);
								resolve();
							},
							fail() {
								reject();
							}
						});
					}))
				}

				Promise.all(promises).then(() => {
					// 发布动态
					const trendDTO = {
						sketch: this.sketch,
						content: this.content,
						// 位置需要获取
						publishPosition: '未知',
						tagId: this.tagId,
						images: this.imagePaths
					}
					publishTrend(trendDTO).then(res => {
						console.log(res);
						uni.switchTab({
							url: "/pages/index/index"
						})
					})
				}).catch(() => {
					uni.showToast({
						title: '上传失败',
						icon: 'error'
					})
				})

			}
		}
	}
</script>

<style>
	.publish-box {
		width: 90%;
		margin: 20px auto;
		background-color: white;
		border-radius: 10px;
		padding-top: 10px;
		padding-left: 20px;
		position: relative;
	}

	.image-picker {
		width: 300px;
		margin-top: 10px;
	}

	.publish-button {
		width: 94%;
		height: 40px;
		border-radius: 5px;
		background-color: #ffd524;
		text-align: center;
		line-height: 40px;
		margin: 0px auto;
	}
</style>